<template>
    <div class="test">
        <img src="" alt="">
        <!-- <header-bar :text="title" :left="left"></header-bar> -->
        <!-- <img src="../../assets/invabg.png" class="invabg" alt=""> -->
        <p class="top-title">VIP大客户理财需求</p>
        <div class="inva-form">
            
            <div class="form-item">
                <!-- <div>
                    
                </div> -->
                <!-- <p style="font-size:14px;">{{list.dayType ? '币种' :'请选择币种'}}</p> -->
                <p class="active">币种</p>
                <p class="nostr" v-if="!list.dayType" @click="handClickDate">选择币种</p>
                <p class="active nostr" v-if="list.dayType" @click="handClickDate">{{list.dayType}}</p>
                <img src="../../assets/xdown.png" alt="" @click="handClickDate">
            </div>
            <div class="form-item" >
                 <!-- <div v-if="quantity">
                    <p>理财币数</p>
                </div> -->
                <p class="active">理财币数</p>
                <input :class="{active:quantity}" v-model="quantity" type="number" placeholder="请输入理财币数">
            </div>
            <div class="form-item ">
                 <!-- <div >
                    <p style="font-size:14px;">{{list.zq ? '风险类型' :'请选择风险类型'}}</p>
                    <p class="active">{{list.zq}}</p>
                </div> -->
                <p class="active">风险类型</p>
                <p class="nostr" v-if="!list.zq" @click="handClickZq">选择风险类型</p>
                <p class="active nostr" v-if="list.zq" @click="handClickZq">{{list.zq}}</p>
                <img src="../../assets/xdown.png" alt="" @click="handClickZq" >
            </div>
             <div class="form-item" >
                 <!-- <div v-if="list.contacts">
                    <p>{{list.contacts ? '联系人' :'请填写联系人'}}</p>
                </div> -->
                <p class="active">联系人</p>
                <input :class="{active:list.contacts}" v-model="list.contacts" type="number" placeholder="输入您的姓名">
            </div>
             <div class="form-item" >
                 <!-- <div v-if="list.mobilephone">
                    <p>{{list.mobilephone ? '联系电话' :'请填写联系电话'}}</p>
                </div> -->
                <p class="active">手机号</p>
                <input :class="{active:list.mobilephone}" v-model="list.mobilephone" type="number" placeholder="输入您的手机号">
            </div>
        </div>
        <div class="lj" @click="ljzb">发送需求</div>
        <mt-popup
                v-model="popupVisible"
                :closeOnClickModal="closeStatus"
                >
                <div class="m_fade">
                <div class="mf_h">选择充币类型</div>
                    <ul>
                        <li v-for="(item,index) in dataList" :key="index" @click="handLi(item)" style="font-weight: 400;">{{item}}</li>
                    </ul>
                </div>
        </mt-popup>
        <mt-popup
                v-model="popupVisible1"
                :closeOnClickModal="closeStatus"
                >
                <div class="m_fade">
                <div class="mf_h">选择风险类型</div>
                    <ul>
                        <li v-for="(item,index) in zlist" :key="index" @click="handLiz(item)" style="font-weight: 500;">{{item}}</li>
                    </ul>
                </div>
        </mt-popup>
    </div>
</template>

<script>
import {  Popup, Toast } from "mint-ui";
import headerBar from "./header";
export default {
    data(){
        return{
            quantity:"",
            list:{
                dayType:"",  //币种
                profit:30,  //率利
                zq:"",
                contacts:"",
                mobilephone:""
            },
            popupVisible:false,
            popupVisible1:false,
            closeStatus:true,
            dataList:['BTC','ETH','EOS','USDT'],
            zlist:["固定收益","浮动收益","高收益"],
            sy:"",
            ll:[12,15,18],  //利率
            liList:[],
            title: "VIP赚币",
            left: {
                status: true
            }
        }
    },
    methods:{
        ljzb(){
            if(!this.list.dayType){
                this.showToast("请选择币种");
                return false;
            }
            if(!this.quantity){
                this.showToast("请输入数量");
                return false;
            }
            if(!this.list.zq){
                this.showToast("请选择风险类型");
                return false;
            }
             if(!this.list.mobilephone){
                this.showToast("请输入联系电话");
                return false;
            }
            if(!this.list.contacts){
                this.showToast("请输入联系人");
                return false;
            }
           
            let data = {
                coinType:this.list.dayType,
                quantity:this.quantity,
                type:this.zlist.indexOf(this.list.zq)+1,
                contacts:this.list.contacts,
                mobilephone:this.list.mobilephone
            };
            this.$ajaxPost("cooperation", data).then(res => {
                var u = navigator.userAgent;
                var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
                var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                if (isAndroid) {
                        // window.bjsLauncher.logoff();
                } else if (isiOS) {
                    window.webkit.messageHandlers.shareTwo.postMessage({
                        name:"go"
                    })
                        // window.location.href = "exit";
                } else {
                }
                this.showToast("发送需求成功");
                this.$router.back();
            });
        },
        showToast(message){
            Toast({
                message: message,
                position: "bottom",
                duration: 2000
            });
        },
        jisuan(){
            this.sy = this.getyMoney();
        },
        //显示币种
        handClickDate(){
            this.popupVisible = true;
        },
        //显示风险度
        handClickZq(){
            this.popupVisible1 = true;
        },
        //点击币种
        handLi(item){
            this.list.dayType = item;
            this.popupVisible = false;
        },
        //点击风险度
        handLiz(item,index){
            this.list.zq = item;
            this.list.profit = this.ll[this.zlist.indexOf(item)];
            this.popupVisible1 = false;
        },
    },
    mounted(){

    },
    created(){
    },
    components:{
        headerBar
    }
}
</script>

<style scoped>
.form-item p:first-child {
    font-size: 16px;
    /* font-weight: bolder; */
}
input:-ms-input-placeholder{
    color: #888;opacity:1;
}
.nostr{
    flex: 1;
    text-align: right;
    padding-right: 0px;
    font-size: 14px;
}
.lj{
    width: calc(100% - 32px);
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: #f7a95c !important;
    color: #fff;
    border-radius: 4px;
    margin: 0 auto;
    margin-top: 15px;
    /* margin-bottom: 20px; */
    display: inherit;
    /* left: 50%;
    transform: translateX(-50%); */
    /* position: absolute; */
}
.active{
    color: #353535 !important;
}
.test{
    width:100%;
    min-height: calc(100% - 30px);
    /* height: 100%; */
    /* overflow: hidden; */
    /* height: -webkit-fill-available; */
    position: relative;
       background: url('../../assets/vipbg.png') no-repeat;
    background-size: 100% 100%;
    padding-top: 30px;
    /* padding-bottom: 20px; */
    overflow-y: scroll;
}
.invabg{
    width: 100%;
    height: 276px;
}
.inva-form{
    /* position: absolute; */
    top: 94px;
    margin: 0 auto;
    /* margin-top: 94px; */
    
    /* width: 289px; */
        width: calc(100% - 32px);
    /* height: 341px; */
    padding: 16px;
    /* background: #fff; */
    border-radius: 4px;
    /* left: 50%; */
    /* transform: translateX(-50%); */
    
      /* padding-bottom: 31px; */
}

.top-title{
    text-align: center;
    margin: 30px auto;
    font-size: 28px;
    margin-bottom: 15px;
}
.form-item{
    width: 100%;
    border-bottom: 1px solid #E0E0E0;
    /* transform: scaleY(0.5); */
    height: 31px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 29px;
    color: #888888;
}
/* .form-item:last-child{
    border-bottom: none;
} */
.form-item input{
    font-size: 14px;
    outline: none;
        width: 100%;
    color: #888888;
        flex: 1;
    text-align: right;
    padding-right: 15px;
    background: transparent !important;
}
.form-item input::-webkit-input-placeholder{
    color: #888;opacity:1;
}

.jisuan{
    width:59px;
    height:33px;
    font-size: 14px;
    background:rgba(247,169,92,1);
    border-radius:4px;
    color: #fff;
    text-align: center;
    line-height: 33px;
    margin-bottom: 6px;
}
.jisuan1{
    margin-bottom: -4px;
}
.form-item  img{
        width: 16px;
        transform: rotate(-90deg);
}
.mint-popup {
    border-radius: 4px;
    overflow: hidden;
}

.m_fade li {
    text-align: center;
    width: 280px;
    height: 40px;
    padding: 0 20px;
    line-height: 40px;
    border-bottom: 1px solid #ececec;
    font-size: 16px;
    font-weight: bold;
}
ul,
li {
    list-style: none;
}

.m_fade {
    /* width: 200px; */
    color: #888888;
    box-sizing: border-box;
}

.m_fade .mf_h {
    padding: 0 20px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-bottom: 1px solid #ececec;
    text-align: center;
    color: #353535;
}
.hasvalue{
  height: 50px;
    align-items: flex-end;
    padding-bottom: 8px;
    padding-top: 12px;
}
.hasvalue div:first-child{
    display: flex;
    flex-flow: column;
    justify-content:space-between;
    height: 50px;
} 
.hasvalue div p{
    line-height: 1;
    font-size: 14px;
}
.form-item1{
    flex-flow: column;
    align-items: flex-start !important;
}
</style>
